<!--
 * Date: 2018年01月02日 09:32:33
 * LastEditors: lvyou
 * LastEditTime: 2019年12月02日 15:54:32
 * FilePath: \youlinweb-master\src\pages\mine\myTalk.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
	<div>
	<div class="loadmore-container" ref="myTopicWrapper">
    <div class="loadmore-ul">
		<div class="shuoshuo-new" v-if="isshuoshuoempty==true">
          <span class="yl-2kong nosvg">
            <span class="path1">
              <span class="path2">
                <span class="path3">
                  <span class="path4">
                    <span class="path5">
                      <span class="path6">
                        <span class="path7">
                          <span class="path8">
                            <span class="path9"></span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
          <span class="no-text">啊哦，这里空空的，让人感觉怪怪的，赶紧来填上一笔吧！</span>
        </div>
        <div class="hot-shuohsuo">
          <div style="background-color: white;" v-for="(item,index) in commentlist" :key="index">
            <hotheader :commentindex="index" :type="1" :nickname="item.name" :saytime="item.timeStamp" :avatarimg="item.head"
                       @topiccommentdetail="tosaycomdet" :place="item.place" :ssshow='item.isRecommend==1' :userType="item.userType" :isTalent="item.isTalent" :pendantType="item.pendantType" :pendantPicUrl="item.pendantPicUrl"></hotheader>
            <commentbody @showImg="popupImg" v-if="item.picture == null" :commentindex="index" :commenttype="null" @replycomment="tosaycomdet" :commenttext="item.content"
                         :piclength="0"  :picarray="item.picture"></commentbody>

             <commentbody @showImg="popupImg" v-if="item.picture != null" :commentindex="index" :commenttype="null" @replycomment="tosaycomdet" :commenttext="item.content"
                         :piclength="item.picture.length"  :picarray="item.picture"></commentbody>
            <thubm-up :topiccommentnum="item.commentNumber" :thumbupnum="item.likes" :commentindex="index" :isup="item.isgood"
                       @thumbup="saythumbup" @commentsvgg="tosaycomdet"></thubm-up>
          </div>
        </div>
    </div>
	</div>
	</div>
</template>
<script>
import {Indicator} from "mint-ui";
import hotheader from "src/components/allhot-header.vue";
import commentbody from "src/components/comment-detail-body.vue";
import thubmUp from "src/components/thumb-up.vue";
import api from "src/api/index";
export default {
  data() {
    return {
      commentlist: [],
      isshuoshuoempty:false,
      msg: "我参与的说说",
      totalPage:'',
			page:1,
			is_r:false,
    };
  },
  methods: {
      popupImg(data,index){
        this.$emit('showImg',data,index)
      },
    saythumbup(data) {
      const params = {
        saysId: this.commentlist[data.commentindex].saysId,
        createSaysUserId: this.commentlist[data.commentindex].userId
      };
      if (this.commentlist[data.commentindex].isgood == 0) {
        api.Querysaythumbup(params).then(res => {
          if (res.success) {
            this.commentlist[data.commentindex].isgood = 1;
            this.commentlist[data.commentindex].likes = res.data;
          }
        });
      } else if (this.commentlist[data.commentindex].isgood == 1) {
        api.Querysaycanclethumbup(params).then(res => {
          if (res.success) {
            this.commentlist[data.commentindex].isgood = 0;
            this.commentlist[data.commentindex].likes = res.data;
          }
        });
      }
    },
    tosaycomdet(data) {
      localStorage.turnCount = "myTalk2detail";
	  	this.$util.getTransformState("turnBackmyTalk");
      this.$router.push({
        path: "/shuodetail",
        query: {
          saysId: this.commentlist[data.commentindex].saysId,
          userId: this.commentlist[data.commentindex].userId
        }
      });
    },
    initMyInteraction() {
      let p = new Promise((resolve, reject) => {
      if ("myTalk2detail" == localStorage.turnCount) {
				let mytalkObj = JSON.parse(localStorage.myTalkStorage);
				this.commentlist = mytalkObj.commentlist;
				this.page = mytalkObj.page;
				this.totalPage = mytalkObj.totalPage;
				if(this.page<this.totalPage){
					this.is_r=false;
				}
				resolve(true);
			}else{
        const params = { type: 3,page:this.page,limit:10,};
        api.QueryMyInteraction(params).then(res => {
          if (res.success) {
            this.totalPage = res.data.totalPage;
            this.commentlist = this.is_r
							? [...this.commentlist, ...res.data.list]
							: res.data.list;
						if(this.page<res.data.totalPage){
							this.is_r=false;
						};
            if(this.commentlist.length==0){
              this.isshuoshuoempty=true; 
            }else{
              this.isshuoshuoempty=false;
            };
            this.$util.picAutoOrient(this.page-1,this.commentlist);
						if(this.myscroll){
							this.$nextTick(() => {
								this.myscroll.refresh();
							});
            };
            let mytalkObj = JSON.stringify({
							commentlist:this.commentlist,
							page: this.page,
							totalPage: this.totalPage,
						});
						localStorage.myTalkStorage = mytalkObj;
          }
          resolve("我参与的说说...");
        });
      }
      });
      return p;
    },
    //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          let myTopicWrapper = this.$refs.myTopicWrapper;
          this.setScroll(myTopicWrapper, this);
        });
        resolve("初始化scroll结束...");
      });
      return p;
    },
    setScroll(myTopicWrapper, _this) {
      _this.myscroll = new iScroll(myTopicWrapper, {
        //上拉时触发
        onScrollMove: function() {
          if (this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&_this.is_r == false) {
            //加载数据
            _this.is_r = true;
            if(_this.page<_this.totalPage){
              _this.page++;
              _this.initMyInteraction();  
            }
          }
        },
      });
      Indicator.close();
    },
  },
  mounted() {
    Indicator.open("加载中...");
    this.initMyInteraction().then(data => {
      return this.initScroll();
    }).then(data => {
			this.$nextTick(() => {
				if (!!this.myscroll) this.myscroll.refresh();
			});
			let loadmore = document.getElementsByClassName("loadmore-ul");
			if ("myTalk2detail" == localStorage.turnCount) {
				if (loadmore.length > 0) {
					setTimeout(() => {
						loadmore[0].style.transform = localStorage.getItem("turnBackmyTalk");
					}, 0);
				}
				localStorage.turnCount = "";
			} 
		}) ;
  },
  components: {
    hotheader,
    commentbody,
    thubmUp
  }
};
</script>
<style scoped>
.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
  	background: #f5f5f5
}
.loadmore-ul {
  padding-bottom: 1.2rem;
  list-style: none;
}
</style>